<template>
  <div class="app-container calendar-list-container">
      <div class="filter-container" v-if="activeName !== '人力需求'">
                  <el-select clearable filterable @focus="customerNameFocus" v-model="listQuery.orderForecastingCustomerName"  style="width: 150px;margin-right:15px;margin-top:7px" placeholder="请选择客户名称">
                    <el-option
                    v-for="(item,index) in customerList"
                    :key="index"
                    :label="item.attributeMaintenanceCustomerName"
                    :value="item.attributeMaintenanceCustomerName">
                  </el-option>
                </el-select>
                <el-select clearable filterable @focus="customerNameFocus" v-model="listQuery.orderForecastingProductType" style="width: 150px;margin-right:15px;margin-top:7px" placeholder="请选择产品类型">
                    <el-option
                    v-for="(item,index) in customerList"
                    :key="index"
                    :label="item.attributeMaintenanceProductType"
                    :value="item.attributeMaintenanceProductType">
                  </el-option>
                </el-select>
                <el-input clearable v-model.number="listQuery.orderForecastingCustomerNumber" placeholder="请输入客户编码" style="width:150px;margin-right:15px;" />
                <el-date-picker
                  v-if="activeName == '预测准确率' || activeName == '历史预测'"
                  style="width:150px;margin-right:15px;" 
                    v-model="listQuery.orderForecastingForecastMonth"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="预测年月">
                  </el-date-picker>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
          <el-button class="filter-item" type="success" icon="el-icon-plus"  v-if="!addBtm && (userInfo.roleId == 8 || userInfo.roleId == 9 || userInfo.roleId == 12 || userInfo.roleId == 14 || userInfo.roleId == 16 || userInfo.roleId == 29 || userInfo.roleId == 46 || userInfo.roleId == 42)" @click="addShow('新增')">新增</el-button>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="第2月预测" name="第2月预测">
        <!-- 表单 -->
        <elTable :activeName="activeName" @getData="handleFilter" :dealList="dealList" @Edit="Edit"></elTable>
      </el-tab-pane>
      <el-tab-pane label="第3月预测" name="第3月预测">
        <elTable :activeName="activeName" @getData="handleFilter" :dealList="dealList" @Edit="Edit"></elTable>
      </el-tab-pane>
      <el-tab-pane label="第4月预测" name="第4月预测">
        <elTable :activeName="activeName" @getData="handleFilter" :dealList="dealList" @Edit="Edit"></elTable>
      </el-tab-pane>
      <el-tab-pane label="人力需求" name="人力需求">
        <elTable :activeName="activeName" @getData="handleFilter" :dealList="dealList"></elTable>
      </el-tab-pane>
      <el-tab-pane label="预测准确率" name="预测准确率">
        <elTable :activeName="activeName" @getData="handleFilter" :dealList="dealList"></elTable>
      </el-tab-pane>
      <el-tab-pane label="历史预测" name="历史预测">
        <elTable :activeName="activeName" @getData="handleFilter" :dealList="dealList" @Edit="Edit"></elTable>
      </el-tab-pane>
    </el-tabs>
    <div v-if="activeName !== '人力需求'" class="pagination-container">
      <!-- pagination 分页 -->
      <div style="display: flex;">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        ></el-pagination>
        <el-form :model="numForm">
          <div style="display: flex;" v-if="activeName == '预测准确率'">
            <el-form-item label="预测台数" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.orderForecastingPredictNumber" style="width:110px" />
            </el-form-item>
            <el-form-item label="预测金额(万)" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.forecastedAmount" style="width:110px" />
            </el-form-item>
            <el-form-item label="排产台数" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.planNumber" style="width:110px" />
            </el-form-item>
            <el-form-item label="排产金额(万)" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.schedulingAmount" style="width:110px" />
            </el-form-item>
            <el-form-item label="预测准确率" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.forecastAccuracy" style="width:110px" />
            </el-form-item>
          </div>
          <div style="display: flex;" v-else>
            <el-form-item label="预测台数" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.orderForecastingPredictNumber" style="width:110px" />
            </el-form-item>
            <el-form-item label="加工台数" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.orderForecastingNumberOfMachines" style="width:110px" />
            </el-form-item>
            <el-form-item label="外发台数" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.orderForecastingOutsourceNumber" style="width:110px" />
            </el-form-item>
            <el-form-item label="预测金额(万)" :label-width="formLabelWidth">
              <el-input disabled v-model="numForm.orderForecastingAggregateAmount" style="width:110px" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-button v-if="activeName == '预测准确率'" type="success" size="small" @click="ycExcel">导出预测准确率Excel</el-button>
      <div v-else>
        <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
        <el-button type="success" size="small" @click="planExcel">导出计划人员填写模板</el-button>
        <div style="display: flex; margin-top: 10px;">
          <el-upload
          style="margin-right: 20px;"
          class="upload-demo"
          ref="upload"
          :action="action"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="fileList"
          :headers="httpHeader"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">商务人员批量添加上传</div>
        </el-upload>
        <el-upload
        class="upload-demo"
        ref="upload2"
        :action="action2"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :file-list="fileList"
        :headers="httpHeader"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">计划人员批量添加上传</div>
      </el-upload>
    </div>
  </div>
      </div>
      <!-- 修改工段信息弹出表单 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" @close="closeReset">
          <el-form :model="modifyform" :rules="rules" ref="formName">
              <el-form-item prop="orderForecastingCustomerName" label="客户名称/类型" :label-width="formLabelWidth">
                  <el-select :disabled="title === '修改'" filterable @focus="customerNameFocus" @change="customerNameChange" v-model="modifyform.orderForecastingCustomerName"  style="width:400px" placeholder="请选择">
                    <el-option
                    v-for="(item,index) in customerList"
                    :key="index"
                    :label="item.attributeMaintenanceCustomerName +'---'+ item.attributeMaintenanceProductType"
                    :value="item.attributeMaintenanceCustomerName +'---'+ item.attributeMaintenanceProductType">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="display: flex;">
                <el-form-item prop="orderForecastingCustomerNumber" label="客户编码" :label-width="formLabelWidth">
                  <el-input :disabled="title == '修改'" v-model="modifyform.orderForecastingCustomerNumber" style="width:120px" />
                </el-form-item>
                <el-form-item prop="orderForecastingPredictNumber" label="预测台数" :label-width="formLabelWidth">
                  <el-input v-model.number="modifyform.orderForecastingPredictNumber" style="width:150px" />
                </el-form-item>
              </div>
              <div style="display: flex;">
                <el-form-item prop="orderForecastingSingleAmount" label="单台金额" :label-width="formLabelWidth">
                  <el-input v-model.number="modifyform.orderForecastingSingleAmount" style="width:120px" />
                </el-form-item>
                <el-form-item prop="orderForecastingForecastMonth" label="预测月份" :label-width="formLabelWidth">
                  <el-date-picker
                  style="width:150px" 
                    v-model="modifyform.orderForecastingForecastMonth"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择月">
                  </el-date-picker>
                </el-form-item>
              </div>
              <el-form-item prop="orderForecastingCustomerDemandTime" label="客户需求时间" :label-width="formLabelWidth">
                <el-date-picker
                style="width:400px" 
                  v-model="modifyform.orderForecastingCustomerDemandTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
          <el-button @click="closeReset">取 消</el-button>
          <el-button type="primary" @click="modifyWorkSec">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import { forecastAccuracy,ForecastingList,ForecastingSave,findGroupCustomerNameAndProductType,orderForecasting,ForecastingUpd,manpowerDemandRed } from '../../api/planManagement.js'
import { getDepartList } from '../../api/user.js'
import elTable from './component/elTable.vue'
import {uploadURL} from '@/utils/baseURL'
import { getToken } from '@/utils/auth'
export default {
  components: {elTable},
  name:'order_Forecasting',
  data() {
      return {
        fileList: [],
        httpHeader: {
          'Authorization': ''
      },
        action: uploadURL + `/back/order-forecasting/OrderForecastingSwExcel?bool=${this.$store.state.user.bool}`,
        action2: uploadURL + `/back/order-forecasting/OrderForecastingJhExcel?bool=${this.$store.state.user.bool}`,
        numForm: {
          orderForecastingPredictNumber:'',
          forecastedAmount:'',
          planNumber:'',
          schedulingAmount:'',
          forecastAccuracy:'',
          orderForecastingNumberOfMachines:'',
          orderForecastingOutsourceNumber:'',
          orderForecastingAggregateAmount:''

        },
        tableData:[{}],
        activeName: '第2月预测',
        // 获取人员列表
        personnelList:'',
          listQuery: {
              page: 1,
              limit: 10,
              isDelete: 0,
              orderForecastingForecastMonth: ''
          },
          modifyform: {
            orderForecastingCustomerName:'',
            orderForecastingProductType:'',
            orderForecastingCustomerNumber:'',
            orderForecastingPredictNumber:'',
            orderForecastingSingleAmount:'',
            orderForecastingForecastMonth:'',
            orderForecastingCustomerDemandTime:''
          },
          rules: {
            orderForecastingCustomerName: [
                { required: true, message: '请输入客户名称', trigger: 'blur' }  
              ],
            orderForecastingProductType: [
              { required: true, message: '请选择产品类型', trigger: 'blur' }
            ],
            orderForecastingCustomerNumber: [
              { required: true, message: '请输入客户编码', trigger: 'blur' }
            ],
            orderForecastingPredictNumber: [
              { required: true, message: '请输入预测台数', trigger: 'blur' },
            ],
            orderForecastingSingleAmount: [
              { required: true, message: '请输入单台金额', trigger: 'blur' },
            ],
            orderForecastingForecastMonth: [
              { required: true, message: '请输入预测月份', trigger: 'blur' },
            ],
            orderForecastingCustomerDemandTime: [
              { required: true, message: '请输入需求时间', trigger: 'blur' },
            ],
          },
          dealList: [],
          total: 0,
          listLoading: false,
          dialogFormVisible: false,
          formLabelWidth: '120px',
          userInfo: this.$store.state.user.userInfo,
          title: '新增',
          customerList:'',
          bool:'',
          goodslist:'',
          addBtm: '',
          HRlist:[{name:'数控车间'},{name:'焊接车间'},{name:'喷涂车间'},{name:'装配车间'},{name:'质量管理部'},{name:'工艺工程部'}]
      }
  },
  methods: {
    // 上传成功
    handleSuccess(response){
      if(response.code == 1){
        this.$message.success(response.msg)
      } else {
        this.$message.error(response.msg)
      }
      this.handleFilter()
    },
    submitUpload() {
      console.log(document.cookie);
      // this.httpHeader.Authorization = this.dealCookie(document.cookie)
      this.httpHeader.Authorization = getToken()
      this.$refs.upload.submit()
      },
      submitUpload2() {
      console.log(document.cookie);
      // this.httpHeader.Authorization = this.dealCookie(document.cookie)
      this.httpHeader.Authorization = getToken()
      this.$refs.upload2.submit()
      },
      // cookies的处理函数
    dealCookie(value) {
        const cookieArr = value.split('=')
        console.log(cookieArr);
        // cookieArr[2]测试服使用
        return cookieArr[1]
    },
    handlePreview(file) {
        console.log(file);
      },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleClick(tab, event){
      console.log(tab.name,event);
      if(tab.name == '第2月预测' || tab.name == '第3月预测' || tab.name == '第4月预测'){
        this.jsDate()
        this.handleFilter()
      } else if(tab.name == '历史预测'){
        delete this.listQuery.orderForecastingForecastMonth
        this.handleFilter()
      } else if(tab.name == '人力需求'){
        this.getHRlist()
      } else if(tab.name == '预测准确率'){
        delete this.listQuery.orderForecastingForecastMonth
        this.getForecast()
      }
    },
    // 客户名称获得焦点
    async customerNameFocus(){
      const res = await findGroupCustomerNameAndProductType()
      console.log(res);
      // this.customerNameLs = res.data
      this.customerList = res.data
    },
    customerNameChange(e){
      this.customerList.forEach(item => {
        if(item.attributeMaintenanceCustomerName == e){
          this.modifyform.manpowerBaselineProductType = item.attributeMaintenanceProductType
          this.modifyform.orderForecastingCustomerName = item.attributeMaintenanceCustomerName
        }
      })
    },
    customerTypeChange(e){
    },
    // 重置表单
    closeReset(){
      this.modifyform = {
        orderForecastingCustomerName:'',
        orderForecastingProductType:'',
        orderForecastingCustomerNumber:'',
        orderForecastingPredictNumber:'',
        orderForecastingSingleAmount:'',
        orderForecastingForecastMonth:'',
        orderForecastingCustomerDemandTime:''
      }
      this.bool = false
      this.$refs.formName.resetFields()
      this.dialogFormVisible = false
    },
    // 打开弹框
    addShow(title){
      this.title = title
      this.dialogFormVisible = true
    },
    // 搜索按钮定义的函数
    async handleFilter() {
      this.listLoading = true
      let query = Object.assign({},this.listQuery)
      if(this.userInfo.roleId == 14){
        query.bool = true
      } else {
        query.bool = false
      }
      const data = await ForecastingList(query)
      this.dealList = data.data.list
      // console.log(this.dealList);
      this.total = data.data.count
      let num1 = 0
      let num2 = 0
      let num3 = 0
      let num4 = 0
      for (let i = 0; i < this.dealList.length; i++) {
        if(this.dealList[i].orderForecastingPredictNumber){
          num1 += parseFloat(this.dealList[i].orderForecastingPredictNumber);
        }
        if(this.dealList[i].orderForecastingNumberOfMachines){
          num2 += parseFloat(this.dealList[i].orderForecastingNumberOfMachines);
        }
        if(this.dealList[i].orderForecastingOutsourceNumber){
          num3 += parseFloat(this.dealList[i].orderForecastingOutsourceNumber);
        }
        if(this.dealList[i].orderForecastingAggregateAmount){
          num4 += parseFloat(this.dealList[i].orderForecastingAggregateAmount);
        }
      }
      this.numForm.orderForecastingPredictNumber = num1
      this.numForm.orderForecastingNumberOfMachines = num2
      this.numForm.orderForecastingOutsourceNumber = num3
      this.numForm.orderForecastingAggregateAmount = num4
      this.listLoading = false
    },
    async businessFocus(){
      if(!this.personnelList) {
        const res = await getDepartList()
        this.personnelList = res.data
      }
    },
    // 修改
    Edit(data){
      console.log(data);
      this.title = '修改'
      this.dialogFormVisible = true
      this.modifyform = JSON.parse(JSON.stringify(data))
      this.modifyform.orderForecastingCustomerName = this.modifyform.orderForecastingCustomerName + '---' + this.modifyform.orderForecastingProductType
    },
    async modifyWorkSec() {
      await this.$refs.formName.validate()
      let query = Object.assign({},this.modifyform)
      const arr = query.orderForecastingCustomerName.split('---')
      console.log( query.orderForecastingCustomerName)
      console.log(arr)
      query.orderForecastingCustomerName = arr[0]
      query.orderForecastingProductType = arr[1]
      if(this.userInfo.roleId == 14){
        query.bool = true
      } else {
        query.bool = false
      }
      const res = await orderForecasting({
            attributeMaintenanceCustomerName:query.orderForecastingCustomerName,
            attributeMaintenanceProductType:query.orderForecastingProductType,
            page: 1,
            limit: 10,
            isDelete: 0})
            console.log(res.data.list);
        if(res.data.list[0].attributeMaintenanceCommercialPersonnelUserName !== this.userInfo.userName && this.userInfo.roleId !== 14){
          return this.$message.error('指定的商务人员不是你!')
        }
      let data = ''
      console.log(this.title)
      if(this.title == '新增'){
        data = await ForecastingSave(query)
      } else if(this.title == '修改'){
        // 计算总金额 
        query.orderForecastingAggregateAmount = (query.orderForecastingNumberOfMachines * query.orderForecastingSingleAmount / 10000).toFixed(1)
        data = await ForecastingUpd(query)
      }
      if(data.code == '1'){
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.dialogFormVisible = false
        this.handleFilter()
      } else {
        this.$message({
          message: `${data.msg}`,
          type: 'error'
        })
      }
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.handleFilter()
    },
    // 导出excel
    async hExportExcel() {
        let query = Object.assign({},this.listQuery)
        query.page = 1
        query.limit = 10000
        console.log('%c导出excel传的参数query:','color:green;font-size:16px;')
        console.log(query)
        let arr = await ForecastingList(query)
        if(!arr.data.list.length) return this.$message.error('没有导出数据')
        arr.data.list.forEach(item => {
            delete item.forecastAccuracy
            delete item.forecastedAmount
            delete item.id
            delete item.isDelete
            delete item.limit
            delete item.orderForecastingUpdateJobNumer
            delete item.page
            delete item.planNumber
            delete item.schedulingAmount
            delete item.orderForecastingCreateTime
        });
        const { header, data } = this.transformDat(arr.data.list)
        console.log(header, data) ;
          import('@/vendor/Export2Excel').then(excel => {
          // excel表示导入的模块对象
          console.log(excel)
          excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: '订单预测excel', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
          })
        })
      },
      async planExcel(){
        let query = Object.assign({},this.listQuery)
        query.page = 1
        query.limit = 10000
        let arr = await ForecastingList(query)
        if(!arr.data.list.length) return this.$message.error('没有导出数据')
        // let arr = JSON.parse(JSON.stringify(this.dealList))
        console.log(arr.data.list);
        arr.data.list.forEach(item => {
            delete item.forecastAccuracy
            delete item.forecastedAmount
            delete item.id
            delete item.isDelete
            delete item.limit
            delete item.orderForecastingUpdateJobNumer
            delete item.page
            delete item.planNumber
            delete item.schedulingAmount
            delete item.orderForecastingCreateTime
            delete item.orderForecastingAggregateAmount
            delete item.orderForecastingOutsourceProportion
            delete item.orderForecastingNumericalControlProportion
            delete item.orderForecastingWeldingProportion
            delete item.orderForecastingSprayProportion
            delete item.orderForecastingDailyAssemblyCapacity
            delete item.orderForecastingUpdateUserName
            delete item.orderForecastingUpdateTime
        });
        const { header, data } = this.transformDa(arr.data.list)
        console.log(header, data) ;
          import('@/vendor/Export2Excel').then(excel => {
          // excel表示导入的模块对象
          console.log(excel)
          excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: '计划人员填写模板', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
          })
        })
      },
      // 导出预测准确率
      async ycExcel(){
        let query = Object.assign({},this.listQuery)
        query.page = 1
        query.limit = 10000
        console.log('%c导出excel传的参数query:','color:green;font-size:16px;')
        console.log(query)
        let arr = await forecastAccuracy(query)
        console.log(arr);
        arr.data.list.forEach(item => {
            delete item.id
            delete item.isDelete
            delete item.limit
            delete item.orderForecastingUpdateJobNumer
            delete item.page
            delete item.orderForecastingCreateTime
            delete item.orderForecastingAggregateAmount
            delete item.orderForecastingAssemblyLeadTime
            delete item.orderForecastingDailyAssemblyCapacity
            delete item.orderForecastingNumberOfMachines
            delete item.orderForecastingNumericalControlProportion
            delete item.orderForecastingOutsourceNumber
            delete item.orderForecastingOutsourceProportion
            delete item.orderForecastingProcessingTime
            delete item.orderForecastingSprayProportion
            delete item.orderForecastingUpdateTime
            delete item.orderForecastingUpdateUserName
            delete item.orderForecastingWeldingProportion
        });
        const { header, data } = this.transf(arr.data.list)
        console.log(header, data) ;
          import('@/vendor/Export2Excel').then(excel => {
          // excel表示导入的模块对象
          console.log(excel)
          excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: '订单预测excel', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
          })
        })
      },
      transf(res){
        const mapInfo = {
          orderForecastingForecastMonth: '预测月份',
          orderForecastingCustomerName: '客户名称',
          orderForecastingProductType: '产品类型',
          orderForecastingCustomerNumber: '客户编码',
          orderForecastingPredictNumber: '预测台数',
          orderForecastingSingleAmount: '单台金额',
          orderForecastingCustomerDemandTime: '客户需求时间',
          forecastedAmount: '预测金额（万）',
          planNumber: '排产台数',
          schedulingAmount: '排产金额（万）',
          forecastAccuracy: '预测准确率',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          const data = res.map(obj => Object.values(obj))
          return { header, data }
      },
      transformDa(res){
        const mapInfo = {
            orderForecastingForecastMonth: '预测月份',
            orderForecastingCustomerName: '客户名称',
            orderForecastingProductType: '产品类型',
            orderForecastingCustomerNumber: '客户编码',
            orderForecastingPredictNumber: '预测台数',
            orderForecastingSingleAmount: '单台金额',
            orderForecastingCustomerDemandTime: '客户需求时间',
            orderForecastingProcessingTime: '上线加工时间',
            orderForecastingNumberOfMachines: '加工台数',
            orderForecastingOutsourceNumber: '外发台数',
            orderForecastingAssemblyLeadTime: '装配上线时间',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          const data = res.map(obj => Object.values(obj))
          return { header, data }
      },
      transformDat(res) {
          const mapInfo = {
            orderForecastingForecastMonth: '预测月份',
            orderForecastingCustomerName: '客户名称',
            orderForecastingProductType: '产品类型',
            orderForecastingCustomerNumber: '客户编码',
            orderForecastingPredictNumber: '预测台数',
            orderForecastingSingleAmount: '单台金额',
            orderForecastingCustomerDemandTime: '客户需求时间',
            orderForecastingProcessingTime: '上线加工时间',
            orderForecastingNumberOfMachines: '加工台数',
            orderForecastingAggregateAmount: '总金额(万)',
            orderForecastingOutsourceNumber: '外发台数',
            orderForecastingOutsourceProportion: '外发占比',
            orderForecastingNumericalControlProportion: '数控加工占比',
            orderForecastingWeldingProportion: '焊接加工占比',
            orderForecastingSprayProportion: '喷涂加工占比',
            orderForecastingDailyAssemblyCapacity: '装配日产能',
            orderForecastingAssemblyLeadTime: '装配上线时间',
            orderForecastingUpdateUserName: '修改人员',
            orderForecastingUpdateTime: '修改时间',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
    getData() {
      this.listQuery.page = 1
      this.listQuery.limit = 10
      if(this.activeName == '预测准确率'){
        this.getForecast()
      } else {
        this.handleFilter()
      }
    },
    async orderForecasting(){
      const res = await orderForecasting({page: 1,limit: 10,isDelete: 0})
      this.goodslist = res.data.list
      const bool = this.goodslist.some(item => item.attributeMaintenanceCommercialPersonnelUserName == this.userInfo.userName)
      if(bool || this.userInfo.roleId == 14){
        this.addBtm = false
      } else {
        this.addBtm = true
      }
    },
    jsDate(){
      const currentDate = new Date();
      const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1); 
      // console.log(nextMonth);
      let nextMonthYear = nextMonth.getFullYear();
      let nextMonthMonth = ''
      if(this.activeName == '第2月预测'){
        nextMonthMonth = nextMonth.getMonth() + 1;
      } else if(this.activeName == '第3月预测'){
        nextMonthMonth = nextMonth.getMonth() + 2;
      } else if(this.activeName == '第4月预测'){
        nextMonthMonth = nextMonth.getMonth() + 3;
      }
      if(nextMonthMonth > 12 ){
        nextMonthYear ++ 
        nextMonthMonth = nextMonthMonth - 12
      }
      this.listQuery.orderForecastingForecastMonth = `${nextMonthYear}-${nextMonthMonth.toString().padStart(2, '0')}`;
    },
    // 人力需求列表
    async getHRlist(){
      const res = await manpowerDemandRed()
      console.log('res',res);
      const one = res.data.one
      const two = res.data.one
      const three = res.data.one
      for (var i = 0; i < this.HRlist.length; i++) {
        this.HRlist[0]._1forecastedGrossProduct = one.sk_forecastedGrossProduct;
        this.HRlist[0]._1endOfMonthManpower = one.sk_endOfMonthManpower;
        this.HRlist[0]._1comprehensiveManpower = one.sk_comprehensiveManpower;
        this.HRlist[0]._1medioManpower = one.sk_medioManpower;
        this.HRlist[0]._1monthlyManpower = one.sk_monthlyManpower;
        this.HRlist[0]._1userList = one.sk_userList;
        this.HRlist[0]._1manpowerIncreaseAndDecrease = one.sk_manpowerIncreaseAndDecrease;
        this.HRlist[0]._2forecastedGrossProduct = two.sk_forecastedGrossProduct;
        this.HRlist[0]._2endOfMonthManpower = two.sk_endOfMonthManpower;
        this.HRlist[0]._2comprehensiveManpower = two.sk_comprehensiveManpower;
        this.HRlist[0]._2medioManpower = two.sk_medioManpower;
        this.HRlist[0]._2monthlyManpower = two.sk_monthlyManpower;
        this.HRlist[0]._2userList = two.sk_userList;
        this.HRlist[0]._2manpowerIncreaseAndDecrease = two.sk_manpowerIncreaseAndDecrease;
        this.HRlist[0]._3forecastedGrossProduct = three.sk_forecastedGrossProduct;
        this.HRlist[0]._3endOfMonthManpower = three.sk_endOfMonthManpower;
        this.HRlist[0]._3comprehensiveManpower = three.sk_comprehensiveManpower;
        this.HRlist[0]._3medioManpower = three.sk_medioManpower;
        this.HRlist[0]._3monthlyManpower = three.sk_monthlyManpower;
        this.HRlist[0]._3userList = three.sk_userList;
        this.HRlist[0]._3manpowerIncreaseAndDecrease = three.sk_manpowerIncreaseAndDecrease;

        this.HRlist[1]._1forecastedGrossProduct = one.hj_forecastedGrossProduct;
        this.HRlist[1]._1endOfMonthManpower = one.hj_endOfMonthManpower;
        this.HRlist[1]._1comprehensiveManpower = one.hj_comprehensiveManpower;
        this.HRlist[1]._1medioManpower = one.hj_medioManpower;
        this.HRlist[1]._1monthlyManpower = one.hj_monthlyManpower;
        this.HRlist[1]._1userList = one.hj_userList;
        this.HRlist[1]._1manpowerIncreaseAndDecrease = one.hj_manpowerIncreaseAndDecrease;
        this.HRlist[1]._2forecastedGrossProduct = two.hj_forecastedGrossProduct;
        this.HRlist[1]._2endOfMonthManpower = two.hj_endOfMonthManpower;
        this.HRlist[1]._2comprehensiveManpower = two.hj_comprehensiveManpower;
        this.HRlist[1]._2medioManpower = two.hj_medioManpower;
        this.HRlist[1]._2monthlyManpower = two.hj_monthlyManpower;
        this.HRlist[1]._2userList = two.hj_userList;
        this.HRlist[1]._2manpowerIncreaseAndDecrease = two.hj_manpowerIncreaseAndDecrease;
        this.HRlist[1]._3forecastedGrossProduct = three.hj_forecastedGrossProduct;
        this.HRlist[1]._3endOfMonthManpower = three.hj_endOfMonthManpower;
        this.HRlist[1]._3comprehensiveManpower = three.hj_comprehensiveManpower;
        this.HRlist[1]._3medioManpower = three.hj_medioManpower;
        this.HRlist[1]._3monthlyManpower = three.hj_monthlyManpower;
        this.HRlist[1]._3userList = three.hj_userList;
        this.HRlist[1]._3manpowerIncreaseAndDecrease = three.hj_manpowerIncreaseAndDecrease;
        
        this.HRlist[2]._1forecastedGrossProduct = one.pt_forecastedGrossProduct;
        this.HRlist[2]._1endOfMonthManpower = one.pt_endOfMonthManpower;
        this.HRlist[2]._1comprehensiveManpower = one.pt_comprehensiveManpower;
        this.HRlist[2]._1medioManpower = one.pt_medioManpower;
        this.HRlist[2]._1monthlyManpower = one.pt_monthlyManpower;
        this.HRlist[2]._1userList = one.pt_userList;
        this.HRlist[2]._1manpowerIncreaseAndDecrease = one.pt_manpowerIncreaseAndDecrease;
        this.HRlist[2]._2forecastedGrossProduct = two.pt_forecastedGrossProduct;
        this.HRlist[2]._2endOfMonthManpower = two.pt_endOfMonthManpower;
        this.HRlist[2]._2comprehensiveManpower = two.pt_comprehensiveManpower;
        this.HRlist[2]._2medioManpower = two.pt_medioManpower;
        this.HRlist[2]._2monthlyManpower = two.pt_monthlyManpower;
        this.HRlist[2]._2userList = two.pt_userList;
        this.HRlist[2]._2manpowerIncreaseAndDecrease = two.pt_manpowerIncreaseAndDecrease;
        this.HRlist[2]._3forecastedGrossProduct = three.pt_forecastedGrossProduct;
        this.HRlist[2]._3endOfMonthManpower = three.pt_endOfMonthManpower;
        this.HRlist[2]._3comprehensiveManpower = three.pt_comprehensiveManpower;
        this.HRlist[2]._3medioManpower = three.pt_medioManpower;
        this.HRlist[2]._3monthlyManpower = three.pt_monthlyManpower;
        this.HRlist[2]._3userList = three.pt_userList;
        this.HRlist[2]._3manpowerIncreaseAndDecrease = three.pt_manpowerIncreaseAndDecrease;

        this.HRlist[3]._1forecastedGrossProduct = one.zp_forecastedGrossProduct;
        this.HRlist[3]._1endOfMonthManpower = one.zp_endOfMonthManpower;
        this.HRlist[3]._1comprehensiveManpower = one.zp_comprehensiveManpower;
        this.HRlist[3]._1medioManpower = one.zp_medioManpower;
        this.HRlist[3]._1monthlyManpower = one.zp_monthlyManpower;
        this.HRlist[3]._1userList = one.zp_userList;
        this.HRlist[3]._1manpowerIncreaseAndDecrease = one.zp_manpowerIncreaseAndDecrease;
        this.HRlist[3]._2forecastedGrossProduct = two.zp_forecastedGrossProduct;
        this.HRlist[3]._2endOfMonthManpower = two.zp_endOfMonthManpower;
        this.HRlist[3]._2comprehensiveManpower = two.zp_comprehensiveManpower;
        this.HRlist[3]._2medioManpower = two.zp_medioManpower;
        this.HRlist[3]._2monthlyManpower = two.zp_monthlyManpower;
        this.HRlist[3]._2userList = two.zp_userList;
        this.HRlist[3]._2manpowerIncreaseAndDecrease = two.zp_manpowerIncreaseAndDecrease;
        this.HRlist[3]._3forecastedGrossProduct = three.zp_forecastedGrossProduct;
        this.HRlist[3]._3endOfMonthManpower = three.zp_endOfMonthManpower;
        this.HRlist[3]._3comprehensiveManpower = three.zp_comprehensiveManpower;
        this.HRlist[3]._3medioManpower = three.zp_medioManpower;
        this.HRlist[3]._3monthlyManpower = three.zp_monthlyManpower;
        this.HRlist[3]._3userList = three.zp_userList;
        this.HRlist[3]._3manpowerIncreaseAndDecrease = three.zp_manpowerIncreaseAndDecrease;

        this.HRlist[4]._1forecastedGrossProduct = one.zl_forecastedGrossProduct;
        this.HRlist[4]._1endOfMonthManpower = one.zl_endOfMonthManpower;
        this.HRlist[4]._1comprehensiveManpower = one.zl_comprehensiveManpower;
        this.HRlist[4]._1medioManpower = one.zl_medioManpower;
        this.HRlist[4]._1monthlyManpower = one.zl_monthlyManpower;
        this.HRlist[4]._1userList = one.zl_userList;
        this.HRlist[4]._1manpowerIncreaseAndDecrease = one.zl_manpowerIncreaseAndDecrease;
        this.HRlist[4]._2forecastedGrossProduct = two.zl_forecastedGrossProduct;
        this.HRlist[4]._2endOfMonthManpower = two.zl_endOfMonthManpower;
        this.HRlist[4]._2comprehensiveManpower = two.zl_comprehensiveManpower;
        this.HRlist[4]._2medioManpower = two.zl_medioManpower;
        this.HRlist[4]._2monthlyManpower = two.zl_monthlyManpower;
        this.HRlist[4]._2userList = two.zl_userList;
        this.HRlist[4]._2manpowerIncreaseAndDecrease = two.zl_manpowerIncreaseAndDecrease;
        this.HRlist[4]._3forecastedGrossProduct = three.zl_forecastedGrossProduct;
        this.HRlist[4]._3endOfMonthManpower = three.zl_endOfMonthManpower;
        this.HRlist[4]._3comprehensiveManpower = three.zl_comprehensiveManpower;
        this.HRlist[4]._3medioManpower = three.zl_medioManpower;
        this.HRlist[4]._3monthlyManpower = three.zl_monthlyManpower;
        this.HRlist[4]._3userList = three.zl_userList;
        this.HRlist[4]._3manpowerIncreaseAndDecrease = three.zl_manpowerIncreaseAndDecrease;

        this.HRlist[5]._1forecastedGrossProduct = one.gygc_forecastedGrossProduct;
        this.HRlist[5]._1endOfMonthManpower = one.gygc_endOfMonthManpower;
        this.HRlist[5]._1comprehensiveManpower = one.gygc_comprehensiveManpower;
        this.HRlist[5]._1medioManpower = one.gygc_medioManpower;
        this.HRlist[5]._1monthlyManpower = one.gygc_monthlyManpower;
        this.HRlist[5]._1userList = one.gygc_userList;
        this.HRlist[5]._1manpowerIncreaseAndDecrease = one.gygc_manpowerIncreaseAndDecrease;
        this.HRlist[5]._2forecastedGrossProduct = two.gygc_forecastedGrossProduct;
        this.HRlist[5]._2endOfMonthManpower = two.gygc_endOfMonthManpower;
        this.HRlist[5]._2comprehensiveManpower = two.gygc_comprehensiveManpower;
        this.HRlist[5]._2medioManpower = two.gygc_medioManpower;
        this.HRlist[5]._2monthlyManpower = two.gygc_monthlyManpower;
        this.HRlist[5]._2userList = two.gygc_userList;
        this.HRlist[5]._2manpowerIncreaseAndDecrease = two.gygc_manpowerIncreaseAndDecrease;
        this.HRlist[5]._3forecastedGrossProduct = three.gygc_forecastedGrossProduct;
        this.HRlist[5]._3endOfMonthManpower = three.gygc_endOfMonthManpower;
        this.HRlist[5]._3comprehensiveManpower = three.gygc_comprehensiveManpower;
        this.HRlist[5]._3medioManpower = three.gygc_medioManpower;
        this.HRlist[5]._3monthlyManpower = three.gygc_monthlyManpower;
        this.HRlist[5]._3userList = three.gygc_userList;
        this.HRlist[5]._3manpowerIncreaseAndDecrease = three.gygc_manpowerIncreaseAndDecrease;
      }
      this.dealList = this.HRlist
    },
    // 预测准确率列表
    async getForecast() {
      this.listLoading = true
      let query = Object.assign({},this.listQuery)
      const data = await forecastAccuracy(query)
      this.dealList = data.data.list
      this.total = data.data.count
      // console.log(this.dealList);
      let num1 = 0
      let num2 = 0
      let num3 = 0
      let num4 = 0
      let num5 = 0
      for (let i = 0; i < this.dealList.length; i++) {
        if(this.dealList[i].orderForecastingPredictNumber){
          num1 += parseFloat(this.dealList[i].orderForecastingPredictNumber);
        }
        if(this.dealList[i].planNumber){
          num2 += parseFloat(this.dealList[i].planNumber);
        }
        if(this.dealList[i].schedulingAmount){
          num3 += parseFloat(this.dealList[i].schedulingAmount);
        }
        if(this.dealList[i].forecastedAmount){
          num4 += parseFloat(this.dealList[i].forecastedAmount);
        }
      }
      this.numForm.orderForecastingPredictNumber = num1
      this.numForm.planNumber = num2
      this.numForm.schedulingAmount = num3
      this.numForm.forecastedAmount = num4
      num5 = this.numForm.forecastedAmount / this.numForm.schedulingAmount
      this.numForm.forecastAccuracy = `${(num5 * 100).toFixed(0)}%`
      console.log(this.numForm);
      this.listLoading = false
    }
  },
  // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
  async mounted() {
        this.jsDate()
        this.handleFilter()
        this.orderForecasting()
  },
}
</script>

<style>

</style>